<style scoped>
  .cat-container {
    position: fixed;
    right: 50px;
    bottom: 100px;
    color: #00adb5;
  }
  .cat-container #vuepress-cat {
    position: fixed;
    opacity: 0.9;
    right: 0px;
    bottom: -20px;
    z-index: 99999;
    pointer-events: none;
  }
</style>

<template>
  <div class="cat-container" v-show="isLoaded">
    <canvas
      id="vuepress-cat"
      :width="style.width"
      :height="style.height"
      class="live2d"
    ></canvas>
  </div>
</template>

<script>
  // import * as live2dJSString from "./live2d";
  // var a = require("./live2d.js");
  export default {
    name: "cat",
    props:{
      screenWidth:{
        default:0
      }
    },
    data() {
      return {
        isLoaded: true,
        model: {
          blackCat:
            "https://cdn.jsdelivr.net/gh/QiShaoXuan/live2DModel@1.0.0/live2d-widget-model-hijiki/assets/hijiki.model.json",
          whiteCat:
            "/assets/tororo.model.json"
        },
        style: {
          width: 280,
          height: 250
        }
      };
    },
    mounted() {
      console.log('加载猫');
      this.initCat();

      // this.$router.afterEach((to, from) => {
      //   if (to.path !== from.path) {
      //     this.initCat();
      //   }
      // });
    },
    methods: {
      initCat() {
        // const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        //   navigator.userAgent
        // )
        //   ? true
        //   : false;
        // if (isMobile) {
        //   this.isLoaded = false;
        //   return console.log("mobile do not load model");
        // }

        // if (!window.loadlive2d) {
        //   const script = document.createElement("script");
        //   script.innerHTML = live2dJSString;
        //   document.body.appendChild(script);
        // }
        console.log('aaaaa',a);
        this.style = {
          width: (150 / 1424) * this.screenWidth,
          height: ((150 / 1424) * this.screenWidth) / 0.8
        };
        // console.log('loadlive2d',loadlive2d);
        // setTimeout(() => {
        //   window.loadlive2d(
        //     "vuepress-cat",
        //     Math.random() > 0.5 ? this.model.blackCat : this.model.whiteCat
        //   );
        // });
      }
    }
  };
</script>
